
import { Form, Radio, Input } from 'antd'
import store from './store'

import { RadioChangeEvent } from 'antd/lib/radio';
import Uploaded from './uploaded';
const StypeOne = () => {
  const RGroup = Radio.Group
  const { data, setData } = store.useContainer()

  const handleChange = (value: 'file' | 'text') => {
    setData(pre => ({ ...pre, importType: value }))
  }
  return (<div>
    <Form.Item label='导入作品'>
      <RGroup
        value={data.importType}
        onChange={(e) => { handleChange(e.target.value) }}
        options={
          [
            {
              label: "文件导入",
              value: 'file'
            },
            {
              label: "文字导入",
              value: 'text'
            },
          ]
        }
      ></RGroup>
    </Form.Item>
    {
      data.importType === 'file' ?
        (<>
          <Form.Item label='上传文件' name='file' rules={[{ required: true }]}>
            <Uploaded></Uploaded>
          </Form.Item>
          <Form.Item noStyle shouldUpdate>
            {(values) => {
              console.log('values', values)
            }
            }
          </Form.Item>
        </>)
        :
        (
          <>
            <Form.Item label='作品名称' rules={[{ required: true }]}>
              <Input showCount placeholder='请输入作品名称' maxLength={64} />
            </Form.Item>
            <Form.Item label='作品内容' rules={[{ required: true }]}>
              <Input.TextArea rows={20} showCount placeholder='请输入作品内容' maxLength={9999} />
            </Form.Item>
          </>
        )
    }
  </div>)
}

export default StypeOne